<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多功能文件夹管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }
        .container {
            display: flex;
            min-height: calc(100vh - 120px);
            gap: 20px;
        }
        .header {
            background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 24px;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .panel {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .panel-header {
            padding: 15px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .file-tree {
            flex: 0 0 280px;
        }
        .file-list {
            flex: 1;
            min-width: 0;
        }
        .file-preview {
            flex: 0 0 420px;
        }
        .file-content {
            flex: 1;
            padding: 15px;
            overflow: auto;
        }
        .drawer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            background: #0d47a1;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1000;
            transition: height 0.3s ease;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        .drawer.expanded {
            height: 200px;
        }
        .drawer-content {
            padding: 20px;
            display: none;
            color: #333;
        }
        .drawer.expanded .drawer-content {
            display: block;
        }
        .file-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background 0.2s;
        }
        .file-item:hover {
            background: #f0f7ff;
        }
        .file-item.selected {
            background: #e3f2fd;
        }
        .file-icon {
            margin-right: 10px;
            width: 24px;
            text-align: center;
        }
        .folder-icon {
            color: #ffb74d;
        }
        .file-icon i {
            color: #4a89dc;
        }
        .file-info {
            flex: 1;
            min-width: 0;
        }
        .file-name {
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .file-desc {
            font-size: 12px;
            color: #888;
        }
        .file-actions {
            display: flex;
            gap: 10px;
        }
        .toolbar {
            padding: 15px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .breadcrumb {
            padding: 15px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .breadcrumb a {
            color: #1e88e5;
            text-decoration: none;
        }
        .breadcrumb a:hover {
            text-decoration: underline;
        }
        .file-content textarea {
            width: 100%;
            height: 100%;
            min-height: 300px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: none;
            font-family: 'Consolas', monospace;
        }
        .quick-folders {
            display: flex;
            gap: 15px;
            padding: 15px;
            flex-wrap: wrap;
        }
        .quick-folder {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            background: #f0f7ff;
            border-radius: 6px;
            width: 100px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .quick-folder:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .quick-folder i {
            font-size: 24px;
            color: #4a89dc;
            margin-bottom: 8px;
        }
        .status-bar {
            padding: 10px 15px;
            background: #f8f9fa;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
        }
        .image-preview {
            text-align: center;
            padding: 20px;
        }
        .image-preview img {
            max-width: 100%;
            max-height: 300px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .context-menu {
            position: absolute;
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            z-index: 1000;
            display: none;
        }
        .context-menu-item {
            padding: 8px 15px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .context-menu-item:hover {
            background: #f0f7ff;
        }
        #fileTree {
            padding: 10px;
        }
        .layui-tree-btn {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1><i class="fas fa-folder"></i> 多功能文件夹管理系统</h1>
        <div class="user-info">
            <img src="https://via.placeholder.com/40" class="layui-nav-img">
            <div>管理员 <i class="fas fa-caret-down"></i></div>
        </div>
    </div>

    <div class="container">
        <!-- 左侧文件树 -->
        <div class="panel file-tree">
            <div class="panel-header">
                <span>文件夹结构</span>
                <button class="layui-btn layui-btn-primary layui-btn-sm" id="refreshTree"><i class="fas fa-sync-alt"></i> 刷新</button>
            </div>
            <div class="file-content">
                <div id="fileTree"></div>
            </div>
        </div>

        <!-- 中间文件列表 -->
        <div class="panel file-list">
            <div class="breadcrumb" id="breadcrumb">
                <a href="#" class="path-link" data-path="">根目录</a>
            </div>
            <div class="toolbar">
                <button class="layui-btn layui-btn-sm" id="newFolder"><i class="fas fa-folder-plus"></i> 新建文件夹</button>
                <button class="layui-btn layui-btn-sm" id="newFile"><i class="fas fa-plus"></i> 新建文件</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="uploadFile"><i class="fas fa-upload"></i> 上传</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" id="deleteFile"><i class="fas fa-trash"></i> 删除</button>
                <button class="layui-btn layui-btn-sm" id="renameFile"><i class="fas fa-edit"></i> 重命名</button>
                <button class="layui-btn layui-btn-sm layui-btn-warm" id="copyFile"><i class="fas fa-copy"></i> 复制</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="moveFile"><i class="fas fa-cut"></i> 移动</button>
                <div class="layui-input-inline" style="margin-left: auto;">
                    <input type="text" placeholder="搜索文件..." class="layui-input layui-input-sm" id="searchInput">
                </div>
            </div>
            <div class="file-content" id="fileListContainer">
                <!-- 文件列表会由JS生成 -->
            </div>
            <div class="status-bar">
                <div>选中: <span id="selectedCount">0</span> 个项目</div>
                <div>总计: <span id="totalCount">0</span> 个项目</div>
            </div>
        </div>

        <!-- 右侧文件预览 -->
        <div class="panel file-preview">
            <div class="panel-header">
                <span>文件预览</span>
                <div>
                    <button class="layui-btn layui-btn-xs layui-btn-primary" id="readOnlyBtn">只读</button>
                    <button class="layui-btn layui-btn-xs" id="editBtn">编辑</button>
                </div>
            </div>
            <div class="file-content" id="previewContainer">
                <textarea id="fileEditor" readonly></textarea>
                <div class="image-preview" id="imagePreview" style="display: none;">
                    <img id="previewImage" src="" alt="图片预览">
                </div>
                <div id="unsupportedFormat" style="padding: 20px; text-align: center; display: none;">
                    <i class="fas fa-file-excel" style="font-size: 48px; color: #ccc; margin-bottom: 15px;"></i>
                    <p>不支持预览此文件格式</p>
                </div>
            </div>
            <div class="toolbar">
                <button class="layui-btn layui-btn-sm" id="saveFile">保存</button>
                <button class="layui-btn layui-btn-sm layui-btn-primary" id="undoEdit">撤销</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="findText">搜索</button>
                <button class="layui-btn layui-btn-sm" id="downloadFile">下载</button>
            </div>
        </div>
    </div>

    <!-- 底部常用文件夹抽屉 -->
    <div class="drawer" id="drawer">
        <i class="fas fa-chevron-up" id="drawerIcon"></i>
        <span style="margin-left: 10px;">常用文件夹</span>
        <div class="drawer-content">
            <div class="quick-folders" id="quickFolders">
                <!-- 常用文件夹会由JS生成 -->
            </div>
        </div>
    </div>

    <!-- 上下文菜单 -->
    <div class="context-menu" id="contextMenu">
        <div class="context-menu-item" data-action="open"><i class="fas fa-folder-open"></i> 打开</div>
        <div class="context-menu-item" data-action="rename"><i class="fas fa-edit"></i> 重命名</div>
        <div class="context-menu-item" data-action="copy"><i class="fas fa-copy"></i> 复制</div>
        <div class="context-menu-item" data-action="move"><i class="fas fa-cut"></i> 移动</div>
        <div class="context-menu-item" data-action="delete"><i class="fas fa-trash"></i> 删除</div>
    </div>

    <script>
        // 模拟后端API返回的数据结构
        const mockFileSystem = {
            id: 'root',
            name: '根目录',
            type: 'folder',
            path: '',
            children: [
                {
                    id: 'project',
                    name: '项目文档',
                    type: 'folder',
                    path: '/项目文档',
                    children: [
                        {
                            id: 'docs',
                            name: '文档',
                            type: 'folder',
                            path: '/项目文档/文档',
                            children: [
                                {
                                    id: 'api-md',
                                    name: 'API文档.md',
                                    type: 'file',
                                    path: '/项目文档/文档/API文档.md',
                                    size: 24576,
                                    modified: '2023-06-20T09:15:00Z',
                                    extension: '.md',
                                    content: '# API文档\n\n这是一个示例API文档。'
                                },
                                {
                                    id: 'plan-docx',
                                    name: '项目计划书.docx',
                                    type: 'file',
                                    path: '/项目文档/文档/项目计划书.docx',
                                    size: 131072,
                                    modified: '2023-06-15T10:30:00Z',
                                    extension: '.docx'
                                }
                            ]
                        },
                        {
                            id: 'plans',
                            name: '计划',
                            type: 'folder',
                            path: '/项目文档/计划',
                            children: []
                        }
                    ]
                },
                {
                    id: 'images',
                    name: '图片资源',
                    type: 'folder',
                    path: '/图片资源',
                    children: [
                        {
                            id: 'products',
                            name: '产品图',
                            type: 'folder',
                            path: '/图片资源/产品图',
                            children: [
                                {
                                    id: 'product1-jpg',
                                    name: '产品1.jpg',
                                    type: 'file',
                                    path: '/图片资源/产品图/产品1.jpg',
                                    size: 2516582,
                                    modified: '2023-06-10T14:22:00Z',
                                    extension: '.jpg'
                                }
                            ]
                        },
                        {
                            id: 'icons',
                            name: '图标',
                            type: 'folder',
                            path: '/图片资源/图标',
                            children: [
                                {
                                    id: 'logo-png',
                                    name: 'logo.png',
                                    type: 'file',
                                    path: '/图片资源/图标/logo.png',
                                    size: 104857,
                                    modified: '2023-06-05T11:30:00Z',
                                    extension: '.png'
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 'design',
                    name: '设计稿',
                    type: 'folder',
                    path: '/设计稿',
                    children: [
                        {
                            id: 'ui-fig',
                            name: 'UI设计.fig',
                            type: 'file',
                            path: '/设计稿/UI设计.fig',
                            size: 2411724,
                            modified: '2023-06-18T10:15:00Z',
                            extension: '.fig'
                        },
                        {
                            id: 'arch-png',
                            name: '架构图.png',
                            type: 'file',
                            path: '/设计稿/架构图.png',
                            size: 1887436,
                            modified: '2023-06-19T11:30:00Z',
                            extension: '.png'
                        }
                    ]
                },
                {
                    id: 'code',
                    name: '代码库',
                    type: 'folder',
                    path: '/代码库',
                    children: [
                        {
                            id: 'frontend',
                            name: '前端',
                            type: 'folder',
                            path: '/代码库/前端',
                            children: [
                                {
                                    id: 'index-html',
                                    name: 'index.html',
                                    type: 'file',
                                    path: '/代码库/前端/index.html',
                                    size: 8192,
                                    modified: '2023-06-22T11:30:00Z',
                                    extension: '.html',
                                    content: "// HTML文件内容"
                                },
                                {
                                    id: 'style-css',
                                    name: 'style.css',
                                    type: 'file',
                                    path: '/代码库/前端/style.css',
                                    size: 10240,
                                    modified: '2023-06-21T16:45:00Z',
                                    extension: '.css',
                                    content: "// 样式文件内容"
                                }
                            ]
                        },
                        {
                            id: 'backend',
                            name: '后端',
                            type: 'folder',
                            path: '/代码库/后端',
                            children: [
                                {
                                    id: 'server-js',
                                    name: 'server.js',
                                    type: 'file',
                                    path: '/代码库/后端/server.js',
                                    size: 15360,
                                    modified: '2023-06-23T14:20:00Z',
                                    extension: '.js',
                                    content: '// 后端服务器代码'
                                }
                            ]
                        }
                    ]
                }
            ]
        };

        // 常用文件夹数据
        const favoriteFolders = [
            { id: 'f1', name: '项目文档', path: '/项目文档' },
            { id: 'f2', name: '代码库', path: '/代码库' },
            { id: 'f3', name: '图片资源', path: '/图片资源' },
            { id: 'f4', name: '设计稿', path: '/设计稿' }
        ];

        // 当前状态
        let currentState = {
            currentPath: '',
            selectedFiles: new Set(),
            editMode: false,
            originalContent: "",
            fileTreeData: [],
            currentFile: null
        };

        // 初始化LayUI模块
        layui.use(['tree', 'layer', 'upload'], function(){
            var tree = layui.tree;
            var layer = layui.layer;
            var upload = layui.upload;

            // 初始化文件树
            initFileTree();
            
            // 初始化常用文件夹
            renderFavoriteFolders();
            
            // 渲染根目录文件列表
            renderFileList(currentState.currentPath);

            // 树形结构刷新按钮
            document.getElementById('refreshTree').addEventListener('click', function() {
                initFileTree();
                layer.msg('已刷新文件树');
            });

            // 新建文件夹按钮
            document.getElementById('newFolder').addEventListener('click', function() {
                layer.prompt({
                    title: '新建文件夹',
                    formType: 0
                }, function(value, index, elem){
                    if(value) {
                        // 在实际应用中，这里会调用API创建文件夹
                        layer.msg('已创建文件夹: ' + value);
                        // 刷新文件列表
                        renderFileList(currentState.currentPath);
                    }
                    layer.close(index);
                });
            });

            // 新建文件按钮
            document.getElementById('newFile').addEventListener('click', function() {
                layer.prompt({
                    title: '新建文件',
                    formType: 0
                }, function(value, index, elem){
                    if(value) {
                        // 在实际应用中，这里会调用API创建文件
                        layer.msg('已创建文件: ' + value);
                        // 刷新文件列表
                        renderFileList(currentState.currentPath);
                    }
                    layer.close(index);
                });
            });

            // 上传文件按钮
            var uploadInst = upload.render({
                elem: '#uploadFile',
                url: '/api/upload/', // 实际使用时替换为真实URL
                accept: 'file',
                done: function(res){
                    layer.msg('上传成功');
                    // 刷新文件列表
                    renderFileList(currentState.currentPath);
                },
                error: function(){
                    layer.msg('上传失败，请重试');
                }
            });

            // 删除文件按钮
            document.getElementById('deleteFile').addEventListener('click', function() {
                if(currentState.selectedFiles.size === 0) {
                    return layer.msg('请先选择要删除的文件');
                }
                
                layer.confirm('确定要删除选中的 ' + currentState.selectedFiles.size + ' 个文件吗？', {
                    title: '确认删除',
                    icon: 3,
                    btn: ['确定', '取消']
                }, function(index){
                    // 在实际应用中，这里会调用API删除文件
                    layer.msg('已删除选中的文件');
                    // 刷新文件列表
                    renderFileList(currentState.currentPath);
                    layer.close(index);
                });
            });

            // 重命名按钮
            document.getElementById('renameFile').addEventListener('click', function() {
                if(currentState.selectedFiles.size !== 1) {
                    return layer.msg('请选择一个文件进行重命名');
                }
                
                const selectedPath = Array.from(currentState.selectedFiles)[0];
                const selectedName = getNodeByPath(selectedPath).name;
                
                layer.prompt({
                    title: '重命名文件',
                    value: selectedName,
                    formType: 0
                }, function(value, index, elem){
                    if(value && value !== selectedName) {
                        // 在实际应用中，这里会调用API重命名文件
                        layer.msg('已重命名文件: ' + value);
                        // 刷新文件列表
                        renderFileList(currentState.currentPath);
                    }
                    layer.close(index);
                });
            });

            // 复制按钮
            document.getElementById('copyFile').addEventListener('click', function() {
                if(currentState.selectedFiles.size === 0) {
                    return layer.msg('请先选择要复制的文件');
                }
                layer.msg('已复制 ' + currentState.selectedFiles.size + ' 个文件到剪贴板');
            });

            // 移动按钮
            document.getElementById('moveFile').addEventListener('click', function() {
                if(currentState.selectedFiles.size === 0) {
                    return layer.msg('请先选择要移动的文件');
                }
                layer.msg('已剪切 ' + currentState.selectedFiles.size + ' 个文件');
            });

            // 搜索功能
            document.getElementById('searchInput').addEventListener('keyup', function(e) {
                if(e.key === 'Enter') {
                    const searchTerm = this.value.toLowerCase();
                    if(!searchTerm) {
                        renderFileList(currentState.currentPath);
                        return;
                    }
                    
                    // 在实际应用中，这里会调用API搜索文件
                    layer.msg('搜索: ' + searchTerm);
                }
            });

            // 只读/编辑模式切换
            document.getElementById('readOnlyBtn').addEventListener('click', function() {
                currentState.editMode = false;
                document.getElementById('fileEditor').readOnly = true;
                this.className = 'layui-btn layui-btn-xs layui-btn-primary';
                document.getElementById('editBtn').className = 'layui-btn layui-btn-xs';
                layer.msg('已切换到只读模式');
            });

            document.getElementById('editBtn').addEventListener('click', function() {
                if (!currentState.currentFile || currentState.currentFile.type !== 'file') {
                    return layer.msg('请先选择一个文件进行编辑');
                }
                
                currentState.editMode = true;
                document.getElementById('fileEditor').readOnly = false;
                this.className = 'layui-btn layui-btn-xs layui-btn-primary';
                document.getElementById('readOnlyBtn').className = 'layui-btn layui-btn-xs';
                layer.msg('已切换到编辑模式');
            });

            // 保存文件
            document.getElementById('saveFile').addEventListener('click', function() {
                if(!currentState.editMode) {
                    return layer.msg('当前为只读模式，无法保存');
                }
                
                const content = document.getElementById('fileEditor').value;
                // 在实际应用中，这里会调用API保存文件
                layer.msg('文件已保存');
            });

            // 撤销编辑
            document.getElementById('undoEdit').addEventListener('click', function() {
                if(currentState.editMode) {
                    document.getElementById('fileEditor').value = currentState.originalContent;
                    layer.msg('已撤销更改');
                }
            });

            // 文本搜索
            document.getElementById('findText').addEventListener('click', function() {
                layer.prompt({
                    title: '查找文本',
                    formType: 0
                }, function(value, index, elem){
                    if(value) {
                        const editor = document.getElementById('fileEditor');
                        const content = editor.value;
                        const idx = content.toLowerCase().indexOf(value.toLowerCase());
                        
                        if(idx !== -1) {
                            editor.focus();
                            editor.setSelectionRange(idx, idx + value.length);
                            layer.msg('找到匹配文本');
                        } else {
                            layer.msg('未找到匹配文本');
                        }
                    }
                    layer.close(index);
                });
            });

            // 下载文件
            document.getElementById('downloadFile').addEventListener('click', function() {
                if(currentState.selectedFiles.size === 0) {
                    return layer.msg('请先选择要下载的文件');
                }
                layer.msg('开始下载选中的 ' + currentState.selectedFiles.size + ' 个文件');
            });

            // 抽屉功能
            var drawer = document.getElementById('drawer');
            var drawerIcon = document.getElementById('drawerIcon');
            
            drawer.addEventListener('click', function(e) {
                if (e.target === drawer || e.target === drawerIcon || e.target.tagName === 'SPAN') {
                    drawer.classList.toggle('expanded');
                    drawerIcon.classList.toggle('fa-chevron-up');
                    drawerIcon.classList.toggle('fa-chevron-down');
                }
            });

            // 初始化文本编辑器
            document.getElementById('fileEditor').addEventListener('focus', function() {
                currentState.originalContent = this.value;
            });
        });

        // 初始化文件树
        function initFileTree() {
            // 转换数据格式以适应LayUI树组件
            const convertTreeData = (node) => {
                const treeNode = {
                    id: node.id,
                    title: node.name,
                    path: node.path,
                    children: []
                };
                
                if (node.children && node.children.length > 0) {
                    node.children.forEach(child => {
                        treeNode.children.push(convertTreeData(child));
                    });
                }
                
                return treeNode;
            };
            
            currentState.fileTreeData = [convertTreeData(mockFileSystem)];
            
            // 渲染树形结构
            layui.tree.render({
                elem: '#fileTree',
                data: currentState.fileTreeData,
                click: function(node) {
                    currentState.currentPath = node.path;
                    renderFileList(node.path);
                    updateBreadcrumb(node.path);
                }
            });
        }

        // 根据路径获取节点
        function getNodeByPath(path) {
            const findNode = (nodes, targetPath) => {
                for (const node of nodes) {
                    if (node.path === targetPath) {
                        return node;
                    }
                    
                    if (node.children && node.children.length > 0) {
                        const found = findNode(node.children, targetPath);
                        if (found) return found;
                    }
                }
                return null;
            };
            
            return findNode([mockFileSystem], path);
        }

        // 根据路径获取子节点
        function getChildrenByPath(path) {
            const node = getNodeByPath(path);
            return node && node.children ? node.children : [];
        }

        // 渲染文件列表
        function renderFileList(path) {
            const container = document.getElementById('fileListContainer');
            const children = getChildrenByPath(path);
            
            container.innerHTML = '';
            
            if(children.length === 0) {
                container.innerHTML = '<div style="padding: 20px; text-align: center; color: #888;">该文件夹为空</div>';
                document.getElementById('totalCount').textContent = '0';
                return;
            }
            
            children.forEach(item => {
                const fileItem = document.createElement('div');
                fileItem.className = 'file-item';
                if(currentState.selectedFiles.has(item.path)) {
                    fileItem.classList.add('selected');
                }
                
                const iconClass = item.type === 'folder' ? 'fa-folder' : getFileIcon(item.name);
                const iconElement = item.type === 'folder' ? 
                    `<i class="fas fa-folder folder-icon"></i>` : 
                    `<i class="far ${iconClass}"></i>`;
                
                const size = item.type === 'folder' ? '' : formatFileSize(item.size);
                const modified = formatDate(item.modified);
                
                fileItem.innerHTML = `
                    <div class="file-icon">${iconElement}</div>
                    <div class="file-info">
                        <div class="file-name">${item.name}</div>
                        <div class="file-desc">${size} ${size ? '·' : ''} 修改时间: ${modified}</div>
                    </div>
                    <div class="file-actions">
                        <button class="layui-btn layui-btn-xs">${item.type === 'folder' ? '打开' : '查看'}</button>
                        <button class="layui-btn layui-btn-xs layui-btn-normal">下载</button>
                    </div>
                `;
                
                // 添加点击事件
                fileItem.addEventListener('click', function(e) {
                    if(e.target.tagName === 'BUTTON') return;
                    
                    if(e.ctrlKey) {
                        // Ctrl+点击多选
                        if(currentState.selectedFiles.has(item.path)) {
                            currentState.selectedFiles.delete(item.path);
                        } else {
                            currentState.selectedFiles.add(item.path);
                        }
                        fileItem.classList.toggle('selected');
                    } else {
                        // 普通点击
                        currentState.selectedFiles.clear();
                        currentState.selectedFiles.add(item.path);
                        document.querySelectorAll('.file-item.selected').forEach(item => {
                            item.classList.remove('selected');
                        });
                        fileItem.classList.add('selected');
                        
                        // 处理文件或文件夹
                        if (item.type === 'folder') {
                            currentState.currentPath = item.path;
                            renderFileList(item.path);
                            updateBreadcrumb(item.path);
                        } else {
                            currentState.currentFile = item;
                            previewFile(item);
                        }
                    }
                    
                    updateSelectionCount();
                });
                
                // 添加上下文菜单
                fileItem.addEventListener('contextmenu', function(e) {
                    e.preventDefault();
                    
                    // 清除其他选中项
                    currentState.selectedFiles.clear();
                    currentState.selectedFiles.add(item.path);
                    document.querySelectorAll('.file-item.selected').forEach(item => {
                        item.classList.remove('selected');
                    });
                    fileItem.classList.add('selected');
                    updateSelectionCount();
                    
                    // 显示上下文菜单
                    const menu = document.getElementById('contextMenu');
                    menu.style.display = 'block';
                    menu.style.left = e.pageX + 'px';
                    menu.style.top = e.pageY + 'px';
                    
                    // 添加菜单项点击事件
                    document.querySelectorAll('.context-menu-item').forEach(menuItem => {
                        menuItem.onclick = function() {
                            const action = this.getAttribute('data-action');
                            handleContextMenuAction(action, item);
                            menu.style.display = 'none';
                        };
                    });
                    
                    // 点击其他地方隐藏菜单
                    document.addEventListener('click', function hideMenu() {
                        menu.style.display = 'none';
                        document.removeEventListener('click', hideMenu);
                    });
                });
                
                container.appendChild(fileItem);
            });
            
            document.getElementById('totalCount').textContent = children.length;
            updateSelectionCount();
        }

        // 根据文件名获取图标
        function getFileIcon(filename) {
            const ext = filename.split('.').pop().toLowerCase();
            const iconMap = {
                'doc': 'fa-file-word',
                'docx': 'fa-file-word',
                'pdf': 'fa-file-pdf',
                'xls': 'fa-file-excel',
                'xlsx': 'fa-file-excel',
                'ppt': 'fa-file-powerpoint',
                'pptx': 'fa-file-powerpoint',
                'zip': 'fa-file-archive',
                'rar': 'fa-file-archive',
                'gz': 'fa-file-archive',
                'jpg': 'fa-file-image',
                'jpeg': 'fa-file-image',
                'png': 'fa-file-image',
                'gif': 'fa-file-image',
                'txt': 'fa-file-alt',
                'md': 'fa-file-alt',
                'js': 'fa-file-code',
                'html': 'fa-file-code',
                'css': 'fa-file-code',
                'py': 'fa-file-code',
                'java': 'fa-file-code'
            };
            
            return iconMap[ext] || 'fa-file';
        }

        // 预览文件
        function previewFile(file) {
            const editor = document.getElementById('fileEditor');
            const imagePreview = document.getElementById('imagePreview');
            const unsupportedFormat = document.getElementById('unsupportedFormat');
            
            // 隐藏所有预览区域
            editor.style.display = 'none';
            imagePreview.style.display = 'none';
            unsupportedFormat.style.display = 'none';
            
            if (file.type === 'folder') {
                // 不应该预览文件夹
                return;
            }
            
            const ext = file.name.split('.').pop().toLowerCase();
            
            // 根据文件类型显示不同的预览
            if (['txt', 'md', 'js', 'html', 'css', 'java', 'py'].includes(ext)) {
                // 文本文件
                editor.style.display = 'block';
                editor.value = file.content || `# ${file.name}\n\n这是一个${ext.toUpperCase()}格式的文件。\n\n实际系统中会根据文件类型调用相应的应用程序打开。`;
                currentState.originalContent = editor.value;
            } else if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) {
                // 图片文件
                imagePreview.style.display = 'block';
                document.getElementById('previewImage').src = 'https://via.placeholder.com/500x300?text=' + file.name;
            } else {
                // 不支持预览的文件类型
                unsupportedFormat.style.display = 'block';
            }
        }

        // 更新面包屑导航
        function updateBreadcrumb(path) {
            const breadcrumb = document.getElementById('breadcrumb');
            
            if (!path) {
                breadcrumb.innerHTML = '<a href="#" class="path-link" data-path="">根目录</a>';
                return;
            }
            
            const parts = path.split('/').filter(part => part !== '');
            let html = '<a href="#" class="path-link" data-path="">根目录</a>';
            
            let currentPath = '';
            for (let i = 0; i < parts.length; i++) {
                currentPath += '/' + parts[i];
                html += ` <i class="fas fa-chevron-right" style="font-size: 10px;"></i> `;
                html += `<a href="#" class="path-link" data-path="${currentPath}">${parts[i]}</a>`;
            }
            
            breadcrumb.innerHTML = html;
            
            // 重新绑定事件
            document.querySelectorAll('.path-link').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const path = this.getAttribute('data-path');
                    currentState.currentPath = path;
                    renderFileList(path);
                    updateBreadcrumb(path);
                });
            });
        }

        // 更新选中计数
        function updateSelectionCount() {
            document.getElementById('selectedCount').textContent = currentState.selectedFiles.size;
        }

        // 处理上下文菜单操作
        function handleContextMenuAction(action, file) {
            switch(action) {
                case 'open':
                    if(file.type === 'folder') {
                        currentState.currentPath = file.path;
                        renderFileList(file.path);
                        updateBreadcrumb(file.path);
                    } else {
                        previewFile(file);
                    }
                    break;
                case 'rename':
                    layui.layer.prompt({
                        title: '重命名',
                        value: file.name,
                        formType: 0
                    }, function(value, index, elem){
                        if(value && value !== file.name) {
                            // 在实际应用中，这里会调用API重命名
                            layui.layer.msg('已重命名为: ' + value);
                            renderFileList(currentState.currentPath);
                        }
                        layui.layer.close(index);
                    });
                    break;
                case 'copy':
                    layui.layer.msg('已复制: ' + file.name);
                    break;
                case 'move':
                    layui.layer.msg('已移动: ' + file.name);
                    break;
                case 'delete':
                    layui.layer.confirm('确定要删除 "' + file.name + '" 吗？', {
                        title: '确认删除',
                        icon: 3,
                        btn: ['确定', '取消']
                    }, function(index){
                        // 在实际应用中，这里会调用API删除
                        currentState.selectedFiles.clear();
                        renderFileList(currentState.currentPath);
                        updateSelectionCount();
                        layui.layer.msg('已删除');
                        layui.layer.close(index);
                    });
                    break;
            }
        }

        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 B';
            const k = 1024;
            const sizes = ['B', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
        }

        // 渲染常用文件夹
        function renderFavoriteFolders() {
            const container = document.getElementById('quickFolders');
            container.innerHTML = '';
            
            favoriteFolders.forEach(folder => {
                const folderElement = document.createElement('div');
                folderElement.className = 'quick-folder';
                folderElement.setAttribute('data-path', folder.path);
                
                folderElement.innerHTML = `
                    <i class="fas fa-folder"></i>
                    <span>${folder.name}</span>
                `;
                
                folderElement.addEventListener('click', function() {
                    const path = this.getAttribute('data-path');
                    currentState.currentPath = path;
                    renderFileList(path);
                    updateBreadcrumb(path);
                    layui.layer.msg('已切换到: ' + folder.name);
                });
                
                container.appendChild(folderElement);
            });
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            updateBreadcrumb(currentState.currentPath);
        });
    </script>
</body>
</html>